<template>

    <div>
        <el-dialog :model-value="dialogVisible" title="企业续费" width="700" :close-on-click-modal="false" @close="cls">

            

            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
                status-icon>

                <el-form-item label="当前到期日期">
                    <el-input v-model="endDate" style="width: 60%;" disabled/>
                </el-form-item>

                <el-form-item label="增加续费时间" prop="month">
                    <el-input v-model="ruleForm.month" style="width: 60%;" placeholder="最小单位：月" />
                </el-form-item>

                <el-form-item label="续费金额" prop="money">
                    <el-input v-model="ruleForm.money" style="width: 60%;" placeholder="2000" />
                </el-form-item>

                <el-form-item label="当前企业可用余额">
                    <el-input v-model="money" style="width: 60%;" disabled/>
                </el-form-item>
            </el-form>


            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="save">保存</el-button>
                    <el-button @click="cls">不保存关闭</el-button>
                </div>
            </template>
        </el-dialog>
    </div>

</template>

<script setup>
import { ref, reactive } from 'vue'
import { xuFei,queryXuFei } from '@/api/platform/enterprise.js'
import { ElMessage } from "element-plus";

//属性区
let endDate=ref() //到期日期
let money=ref() //可用金额
let ruleForm = ref({
    eid: 0,
    month: '',
    money: ''
})
let ruleFormRef = ref(null)

//声明属性
const props = defineProps({
    "dialogVisible": {
        type: Boolean,
        default: false
    }
})

//表单验证规则
const rules = reactive({
    month: [
        { required: true, message: '请输入续费月份', trigger: 'blur' },
    ],
    money: [
        { required: true, message: '请输入续费金额', trigger: 'blur' },
    ]
})

//声明事件
const emits = defineEmits(["close","reflush"])


//方法区

//关闭
let cls = () => {
    emits("close")
}
let id = ref()
//获取企业id
let getId = (data) => {
    ruleForm.value.eid = data
    id.value=ruleForm.value.eid
}

//查询到期日
let init = async()=>{
    let res= await queryXuFei(id.value)
    console.log("会员到期日",res)
    if(res.code ==200){
        endDate.value=res.data.expireDate
        money.value=res.data.money
    }
}

//暴露方法
defineExpose({ getId,init })
//保存
let save = async () => {
    //调用表单校验 异步的
    let valid = await ruleFormRef.value.validate(valid => { })
    if (!valid) {
        return;
    }

    // console.log(ruleForm.value)
    // return;

    let res = await xuFei(ruleForm.value)
    console.log(res);
    if (res.code == 200) {
        ElMessage({
            message: "续费成功",
            type: "success"
        });

        ruleForm.value ={
            eid: 0,
            month: '',
            money: ''
        }
        //关闭对话框
        cls();
        //刷新数据
        emits("reflush")

    }

}
</script>

<style scope></style>